<template>
  <div>
    <h2>组合API-案例实战</h2>
    <hr>
    <div>坐标信息：{{'(' + x + ',' + y + ')'}}</div>
    <hr>
    <div>当前数量：{{num}}</div>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
import { onMounted, onUnmounted, reactive, toRefs, ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // 案例
    // 1、控制鼠标的坐标显示
    const position = reactive({
      x: 0,
      y: 0
    })

    // x,y实际上是对象，访问他们的值需要value属性
    const { x, y } = toRefs(position)

    // 控制坐标的修改
    const move = (e) => {
      // position.x = e.clientX
      // position.y = e.clientY
      x.value = e.clientX
      y.value = e.clientY
    }

    // 监听鼠标的移动事件
    onMounted(() => {
      document.addEventListener('mousemove', move)
    })

    // 组件销毁时，解绑事件
    onUnmounted(() => {
      document.removeEventListener('mousemove')
    })

    // ------------------------------------
    // 2、控制数据的累加操作
    const num = ref(0)
    const handleClick = () => {
      num.value = num.value + 1
    }

    return { x, y, num, handleClick }
  }
}
</script>
